<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
      <h3>msg: {{msg}}</h3>
      <h3>person: {{person}}</h3>

      <button @click="updateMsg">更新基本类型值</button>
      <button @click="updateName">更新对象的属性(已有)</button>
      <button @click="updataSex">更新对象属性（直接添加）</button>
      <button @click="updataSex2">更新对象属性（set添加）</button>
      <button @click="deleteP">删除对象的属性</button>
      <button @click="deletePs">删除对象的属性</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const vs = new Vue({
      el: "#test",
      data: {
        msg:'abc',
        person:{id:2,name:'tom',age:12}
      },
      methods:{
        updateMsg(){
            this.msg = 'cba'
        },
        updateName(){
            this.person.name='jack'
        },
        updataSex(){
          this.person.sex='女'
        },
        updataSex2(){
          // Vue.set(this.person,'sex','男')
          this.$set(this.person,'sex','女')
        },
        deleteP(){
          delete this.person.name
        },
        deletePs(){
          // Vue.delete(this.person,'name')
          this.$delete(this.person,'name')
        }
      }
    })
    // console.log(vm);
  </script>
</body>
</html>